@import './variables.scss';
@mixin noBtnBorder($color){
  border-color: $color;
}
@mixin colorBtn($color) {
  background: $color;
  &:hover {
    color: $color;
    &:before,
    &:after {
      background: $color;
    }
  }
}
@mixin mainBtn($color, $bgColor) {
  background-color: $bgColor;
  padding: 9px 15px;
  border: 1px solid $color;
  outline: none;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
@mixin twoBtnStyle($color1, $color2) {
  button{
    width: 100px;
    &:first-child{
      @include mainBtn($color1, $color1);
    }
    &:last-child{
      background-color: #fff;
      border-color: $color2;
      color: $color2;
    }
  }
}
@mixin threeBtnStyle($color) {
  button{
    width: 100px;
    &:nth-child(2){
      @include mainBtn($color, $color);
    }
    &:last-child,&:first-child{
      background-color: #fff;
      border-color: $color;
      color: $color;
    }
  }
}
.operation-span{
  color: $purple;
  cursor: pointer;
  font-size: 14px;
  &:first-child{
    margin-right: 15px;
  }
}
.disabled-span{
  color: #c0c4cc;
  cursor: no-drop;
}
.no-bg-btn{
  @include mainBtn($green, #fff);
  color: $green;
  width: 100px;
  &.el-button:focus, &.el-button:hover{
    color: $green;
    border-color: $green;
    background-color: transparent;
  }
}
.none-bg-btn{
  @include mainBtn($green, #fff);
  color: $green;
  &.el-button:focus, &.el-button:hover{
    color: $green;
    border-color: $green;
    background-color: transparent;
  }
}
.center-btn{
  width: 120px;
  @include mainBtn($green,$green)
}
.purple-btn{
  @include mainBtn($purple,$purple);
  @include noBtnBorder($purple);
  &.el-button:focus, &.el-button:hover{
    color: #fff;
    border-color: $purple;
    background-color: $purple;
  }
}
.blue-btn {
  @include colorBtn($blue)
}
.footer-two-btn-right{
  text-align: right;
  @include twoBtnStyle($green, $green)
}
.footer-one-btn-right{
  text-align: right;
  button{
    @include mainBtn($green,$green);
    width: 100px;
    background-color: #fff;
    border-color: $green;
    color: $green;
  }
}
.footer-one-btn-center{
  text-align: center;
  button{
    @include mainBtn($green,$green);
    background-color: #fff;
    border-color: $green;
    color: $green;
  }
}
.footer-three-btn-right{
  text-align: right;
  @include threeBtnStyle($green)
}
.light-blue-btn {
  @include colorBtn($light-blue)
}

.red-btn {
  @include colorBtn($red)
}

.pink-btn {
  @include colorBtn($pink)
}

.green-btn {
  background-color: $green;
  @include mainBtn($green,$green);
  &.el-button:focus, &.el-button:hover{
    color: #fff;
    border-color: $green;
    background-color: $green;
  }
}

.tiffany-btn {
  @include colorBtn($tiffany)
}

.yellow-btn {
  @include colorBtn($yellow)
}

.pan-btn {
  font-size: 14px;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  outline: none;
  margin-right: 25px;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;
  &:hover {
    background: #fff;
    &:before,
    &:after {
      width: 100%;
      transition: 600ms ease all;
    }
  }
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }
  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}

.custom-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 4px;
}

